<!doctype html>
[#escape x as (x)!?html]
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>头像修改 - ${site.fullNameOrName}${global.customs['poweredBy']}</title>
    [#include 'inc_meta.html'/]
    [#include 'inc_css.html'/]
    [#include 'inc_js.html'/]
    <link rel="stylesheet" href="_files/vendor/blueimp-file-upload/css/jquery.fileupload.css">
    <link rel="stylesheet" href="_files/vendor/cropperjs/dist/cropper.min.css">
    <style>
        /* Limit image width to avoid overflow the container */
        img {
            max-width: 100%; /* This rule is very important, please do not ignore this! */
        }
    </style>
</head>
<body class="bg-light">
[#include 'inc_header.html'/]
<div class="container">
    <div class="row">
        <div class="col">
            [#include 'sys_member_my_header.html'/]
        </div>
    </div>
    <div class="row pb-3">
        <div class="col-lg-3 mt-3">
            <div class="list-group">
                [#include 'sys_member_my_left.html'/]
                <script>$('#leftMyAvatar').addClass('active');</script>
            </div>
        </div>
        <div class="col-lg-9">
            <div class="px-3 mt-3 bg-white border">
                <div class="py-2 border-bottom d-flex align-items-center">
                    <h5 class="flex-grow-1 mb-0">头像修改</h5>
                </div>
                <div class="mt-3 pb-3">
                    <div class="mt-3" style="max-height: 900px;">
                        <img src="${(targetUser!user).avatarLarge}?d=${.now?datetime}" class="rounded" style="width:180px;height:180px;">
                    </div>
                    <div class="mt-3">
                        <span class="btn btn-success fileinput-button">
                            <i class="fas fa-plus"></i>
                            <span>上传头像</span>
                            <input id="fileupload" type="file" name="file" accept=".jpg,.jpeg,.png,.gif">
                        </span>
                        <div id="progress" class="progress mt-2 hidden">
                            <div class="progress-bar progress-bar-success"></div>
                        </div>
                        <div id="progressfail" class="invalid-feedback"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="pictureModel" class="modal fade bd-example-modal-lg" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <div class="modal-body">
                <div id="imageDiv" class="mt-2"></div>
                <div class="clearfix mt-2">
                    <div class="image-preview float-left border" style="width:160px;height:160px;overflow: hidden;"></div>
                    <div class="image-preview float-left border ml-2 rounded-circle" style="width:80px;height:80px;overflow: hidden;"></div>
                    <form class="float-right pt-2" id="validForm" action="${ctx}/my/avatar" method="POST">
                        <input type="hidden" name="status_0" value="头像修改成功！">
                        <input type="hidden" name="nextUrl" value="${url}">
                        <input type="hidden" id="top" name="top">
                        <input type="hidden" id="left" name="left">
                        <input type="hidden" id="width" name="width">
                        <input type="hidden" id="height" name="height">
                        <button type="submit" class="btn btn-primary">提交</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="_files/vendor/blueimp-file-upload/js/vendor/jquery.ui.widget.min.js"></script>
<script src="_files/vendor/blueimp-file-upload/js/jquery.iframe-transport.min.js"></script>
<script src="_files/vendor/blueimp-file-upload/js/jquery.fileupload.min.js"></script>
<script src="_files/vendor/blueimp-file-upload/js/jquery.fileupload-process.min.js"></script>
<script src="_files/vendor/blueimp-file-upload/js/jquery.fileupload-validate.min.js"></script>
<script src="_files/vendor/cropperjs/dist/cropper.min.js"></script>
<script src="_files/vendor/jquery-cropper/dist/jquery-cropper.min.js"></script>
<script>
    $(function () {
        $('#validForm').validate();
        $('#fileupload').fileupload({
            url: '${ctx}/my/avatar_upload',
            dataType: 'json',
            maxFileSize: 4096000,
            acceptFileTypes: new RegExp("(.jpg|.jpeg|.png|.gif)$", 'i'),
            done: function (e, data) {
                if (data.result.fileUrl) {
                    // 上传成功后立即显示图片会出现图片不存在的问题，可能上传后服务器需要一个反应时间，经测试至少要延迟1000毫秒才能确保正确显示图片。
                    setTimeout(function () {
                        $('#imageDiv').append($('<img>').attr('id', 'image').attr('src', data.result.fileUrl));
                        $('#url').val(data.result.fileUrl);
                        $('#image').cropper({
                            aspectRatio: 1 / 1,
                            autoCropArea: 1,
                            viewMode: 2,
                            minCropBoxWidth:10,
                            minCropBoxHeight:10,
                            zoomable: false,
                            preview: '.image-preview',
                            crop: function (event) {
                                $('#left').val(Math.floor(event.detail.x));
                                $('#top').val(Math.floor(event.detail.y));
                                $('#width').val(Math.floor(event.detail.width));
                                $('#height').val(Math.floor(event.detail.height));
                            }
                        });
                    }, 1000);
                    // 要在显示图片前显示对话框，否则会出现图片大小无法计算的问题。为了让显示对话框和显示图片更好的衔接，延迟500毫秒显示对话框。
                    setTimeout(function () {
                        $('#pictureModel').modal('show');
                        $('#imageDiv').empty();
                    },500);
                } else {
                    showError(data.result.message);
                }
            },
            fail: function (e, data) {
                showErrorPre(data.jqXHR);
            },
            start: function (e) {
                $('#progressfail').text('').hide();
                $('#progress').show();
                $('#progress .progress-bar').css('width', '0%');
            },
            always: function (e) {
                setTimeout(function () {
                    $('#progress').hide('fast');
                    $('#progress .progress-bar').css('width', '0%');
                }, 1000);
            },
            progress: function (e, data) {
                var progress = Math.floor(data.loaded / data.total * 100);
                $('#progress .progress-bar').css('width', progress + '%');
            },
            processfail: function (e, data) {
                var file = data.files[data.index];
                if (data.files.error && file.error) {
                    $('#progressfail').text(file.error).show();
                }
            },
            messages: {
                acceptFileTypes: '该文件类型不允许上传',
                maxFileSize: '文件太大'
            }
        }).prop('disabled', !$.support.fileInput).parent().addClass($.support.fileInput ? undefined : 'disabled');
    });
</script>
</body>
</html>
[/#escape]
